import './index.css'
import {useState,useEffect} from 'react'
// 导航
import Navigation from '../../components/Navigation'
import Nav from '../../components/Nav/index'
import Marketing from '../../components/marke/marketing'
import Rightnav from '../../components/rightnav/rightnav'
import Focusing from '../../components/focusing/focusing'
import Footer from '../../components/footer/footer'
import Sound from '../../components/trends/Tsound/sound'
import Portrait from '../../components/trends/Tportrait/portrait'
import Action from '../../components/trends/Taction/action'
import AIGC from '../../components/newAIGC/AIGC'
import Team from '../../components/Team/Team'
import ThreeD from '../../components/newAIGC/Threed'
import Posters from '../../components/trends/Tposters/posters'
import Imgcart from '../../components/Imgcart/Imgcart'
// 轮播图
import Carousel from '../../components/Carousel/index'

const Home=()=>{
    const [isinit,SetInit]=useState(true)

    const [nav,SetNav]=useState(false)
    useEffect(()=>{
        const handleScroll=()=>{{
            const scrollTop=window.pageYOffset||document.documentElement.scrollTop || document.body.scrollTop || 0;
            const threshold = 100;
            if (scrollTop > threshold) {  
                SetInit(false); // 隐藏div  
            } else {  
                SetInit(true); // 显示div  
            }  
            }}
            window.addEventListener('scroll', handleScroll);  

        // 组件卸载时移除事件监听器  
            return () => {  
            window.removeEventListener('scroll', handleScroll);  
            };  



    },[])

    useEffect(()=>{
        const handleScroll=()=>{{
            const scrollTop=window.pageYOffset||document.documentElement.scrollTop || document.body.scrollTop || 0;
            const threshold = 100;
            if (scrollTop > threshold) {  
                SetInit(false); // 隐藏div  
            } else {  
                SetInit(true); // 显示div  
            }  
            }}
            window.addEventListener('scroll', handleScroll);  

        // 组件卸载时移除事件监听器  
            return () => {  
            window.removeEventListener('scroll', handleScroll);  
            };  



    },[])

    useEffect(()=>{
        const handleScroll=()=>{{
            const scrollTop=window.pageYOffset||document.documentElement.scrollTop || document.body.scrollTop || 0;
            const threshold = 100;
            if (scrollTop > threshold) {  
                SetNav(true); // 隐藏div  
            } else {  
                SetNav(false); // 显示div  
            }  
            }}
            window.addEventListener('scroll', handleScroll);  

        // 组件卸载时移除事件监听器  
            return () => {  
            window.removeEventListener('scroll', handleScroll);  
            };  

    })
    return (
        <div className='box' >
            {/* 顶部导航 */}
            <div className='navTop' style={{display:isinit?'block':'none'}}>
            <Navigation></Navigation>
            </div>
              {/* 导航 */}
            <div className='nav' style={{display:nav?'block':'none'}}>
            <Nav></Nav>
            </div>

            {/* 轮播 */}
            <div className='navbox' >
                <Carousel></Carousel>
            </div>
            {/* 轮播图下方空白部分 */}
                <div className='shangchuan'>
                    <span className='iconfont icon-xiangce'>当前在线120,035,672张</span>
                    <span className='iconfont icon-huangguan'>企业专享75,064,214张</span>
                    <span className='iconfont icon-bianji'><a href="">进步包图在线设计</a></span>
                </div>
            {/* 主盒子 */}
            <div className='main'>
             
                  {/* 轮播图下的图片卡片 */}
                <div className='imgcart'>
                <Imgcart/>
                </div>
                {/* 营销热点 */}
                <div className='marketing'>
                    <Marketing />
                     {/* <Ap></Ap> */}
                </div>
                {/* 聚焦近期热点 */}
                <div className='Focusing'>
                   <Focusing/>

                </div>
                {/* 新晋潮流-AIGC */}
                <div className='AIGC'>
                    {/* 新晋潮流-AIGC */}
                    <AIGC/>
                    {/* <Sound></Sound> */}
                </div>
                {/* 新晋潮流-3D视觉 */}
                <div className='threeD'>
                    {/* 新晋潮流-3D视觉 */}
                    <ThreeD/>
                    {/* <Portrait/> */}
                </div>
                {/* 行业趋势-视频 */}
                {/* <div className='ITvideo'>
                    行业趋势-视频
                    
                </div> */}
                {/* 行业趋势-海报 */}
                <div className='ITposters'>
                    
                    <Posters/>
                </div>
                {/* 行业趋势-实拍 */}
                <div className='ITaction'>
                    <Action/>
                </div>
                {/* 行业趋势-配乐 */}
                <div className='ITsoundtracks'>
                    <Sound></Sound>
                </div>
                {/* 行业趋势-人像 */}
                <div className='ITportrait'>
                    <Portrait/>
                </div>
                {/* 行业趋势-电商 */}
                {/* <div className='ITcommerce'>
                    行业趋势-电商
                </div> */}
                {/* 选择团队 */}
                <div className='team'>
                    {/* 选择团队 */}
                    <Team/>
                </div>
                {/* 素材采购 */}
                {/* <div className='purchase'>
                    素材采购
                </div> */}
                
            </div>
             {/* 页脚 */}
             <div className='footer'>
                   <Footer></Footer>
                </div>
             {/* 右侧 */}
             <div >
                <Rightnav></Rightnav>
            </div>


           </div>

    )
}

export default Home
